@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
  font-family: Sansation;
  src: url(fonts/Sansation.ttf);
}
@font-face {
  font-family: MCBlox;
  src: url(fonts/MCBlox.ttf);
}
@font-face {
  font-family: MCReg;
  src: url(fonts/MCReg.otf);
}
@font-face {
  font-family: MCBold;
  src: url(fonts/MCBold.otf);
}
@font-face {
  font-family: MCTen;
  src: url(fonts/MCTen.ttf);
}

body {
  background-color: rgb(0, 0, 0);
  font-family: 'MCReg', 'MCTen', 'PT Sans', 'Roboto';
  background-image: radial-gradient(circle at bottom left, rgba(14, 116, 0, 0.082), transparent 80%),
                    radial-gradient(circle at top left, rgba(8, 71, 0, 0.26), transparent 90%);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  font-weight: 50;
  margin: 7vh 23vw;
}

h1 {
  margin: 4.4rem 0rem 6.4rem 1.6rem;
}

h2, h3 {
  text-shadow: #78d300 2px 2px 3px,#78d300 -2px -2px 3px,#78d300 2px -2px 3px,#78d300 -2px 2px 3px;
  text-emphasis:  blue;
  color: rgb(12, 12, 12);
  opacity: 0;
  animation: fadein 2s forwards;
  animation-delay: .2s;
  margin-left: .5rem;
}

.reso {
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  animation: fadein 2s forwards;
  animation-delay: .4s;
}

.pics {
  opacity: 0;
  position: relative;
  right: 0%;
  animation: fadein 2s forwards;
  animation-delay: .6s;
  align-items: end;
}

p {
  opacity: 0;
  animation: fadein 2s forwards;
  animation-delay: .6s;
}

@media (max-width: 500px) {

body {
  margin: 8vw;
  font-size: .9rem;
}

h1 {
  font-size: 3rem;
}

.pics {
  scale: .8;
}


}